<template>
  <div class="ranking">
    <!-- header -->
    <van-nav-bar
      title="排行榜"
      left-text="返回"
      class="ranking-nav"
      ref="header"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- scroll -->
    <better-scroll :data="iconItems" class="ranking-wrapper">
      <ul class="ranking-main">
        <li v-for="(list, index) in iconItems" :key="index">
          <div>
            {{ index + 1 }}
          </div>
          <div>
            <img :src="list.icon" alt="">
            <div>
              <span>{{ list.label }}</span>
              <span>今日已接单: {{ list.num }}</span>
            </div>
          </div>
        </li>
      </ul>
    </better-scroll>
  </div>
</template>

<script>
export default {
  name: "Ranking",
  data() {
    return {
      iconItems: [
        {
          label: "响叮当",
          icon: require("./../../assets/img/xiangdingdang.png"),
          index: 0,
          num: ""
        },
        {
          label: "丑小鸭",
          icon: require("./../../assets/img/chouxiaoya.jpg"),
          index: 1,
          num: ""
        },
        {
          label: "秋天乐园",
          icon: require("./../../assets/img/langwo.png"),
          index: 2,
          num: ""
        },
        {
          label: "私房钱",
          icon: require("./../../assets/img/sifangqian.png"),
          index: 3,
          num: ""
        },
        {
          label: "小金矿",
          icon: require("./../../assets/img/xiaojinkuang.png"),
          index: 4,
          num: ""
        },
        {
          label: "大黄蜂",
          icon: require("./../../assets/img/dahuangfeng.png"),
          index: 5,
          num: ""
        },
        {
          label: "大师兄",
          icon: require("./../../assets/img/dashixiong.png"),
          index: 6,
          num: ""
        },
        {
          label: "聚人气",
          icon: require("./../../assets/img/jurenqi.png"),
          index: 7,
          num: ""
        },
        {
          label: "开心果",
          icon: require("./../../assets/img/kaixinguo.png"),
          index: 8,
          num: ""
        },
        {
          label: "小牛班",
          icon: require("./../../assets/img/xiaoniuban.png"),
          index: 9,
          num: ""
        },
        {
          label: "有单网",
          icon: require("./../../assets/img/youdanwang.png"),
          index: 10,
          num: ""
        },
        {
          label: "宅仔",
          icon: require("./../../assets/img/zhaizai.png"),
          index: 11,
          num: ""
        },
        {
          label: "征服者",
          icon: require("./../../assets/img/zhengfuzhe.png"),
          index: 12,
          num: ""
        },
        {
          label: "鸿昌科技",
          icon: require("./../../assets/img/timg.jpg"),
          index: 13,
          num: ""
        },
        {
          label: "天玺",
          icon: require("./../../assets/img/tianxi.jpg"),
          index: 14,
          num: ""
        },
        {
          label: "麦田",
          icon: require("./../../assets/img/mt.png"),
          index: 15,
          num: ""
        },
        {
          label: "云美贝",
          icon: require("./../../assets/img/mt.png"),
          index: 16,
          num: ""
        },
        {
          label: "淘气旺",
          icon: require("./../../assets/img/mischievous.png"),
          index: 17,
          num: ""
        },
        {
          label: "小猴子",
          icon: require("./../../assets/img/monkey.png"),
          index: 18,
          num: ""
        },
        {
          label: "闹闹派单",
          icon: require("./../../assets/img/noisy.png"),
          index: 19,
          num: ""
        },
        {
          label: "淘助跑",
          icon: require("./../../assets/img/run-up.png"),
          index: 20,
          num: ""
        },
        {
          label: "月光宝盒",
          icon: require("./../../assets/img/moon.png"),
          index: 21,
          num: ""
        },
        {
          label: "泡泡糖",
          icon: require("./../../assets/img/bubble.png"),
          index: 22,
          num: ""
        },
        {
          label: "有单做",
          icon: require("./../../assets/img/single.jpg"),
          index: 23,
          num: ""
        },
        {
          label: "白名单",
          icon: require("./../../assets/img/white-list.jpg"),
          index: 24,
          num: ""
        },
        {
          label: "大联盟",
          icon: require("./../../assets/img/grand-alliance.jpg"),
          index: 25,
          num: ""
        },
        {
          label: "乐淘",
          icon: require("./../../assets/img/le-tao.jpg"),
          index: 26,
          num: ""
        },
        {
          label: "致承",
          icon: require("./../../assets/img/bearing.png"),
          index: 27,
          num: ""
        },
        {
          label: "D66",
          icon: require("./../../assets/img/D66.jpg"),
          index: 28,
          num: ""
        },
        {
          label: "美丽日记",
          icon: require("./../../assets/img/beauty.png"),
          index: 29,
          num: ""
        },
        {
          label: "小黑猪",
          icon: require("./../../assets/img/pig.jpg"),
          index: 30,
          num: ""
        },
        {
          label: "淘宝圈",
          icon: require("./../../assets/img/creator.jpg"),
          index: 31,
          num: ""
        },
        {
          label: "麦家乐",
          icon: require("./../../assets/img/maijiale.jpg"),
          index: 32,
          num: ""
        },
        {
          label: "优麦菜",
          icon: require("./../../assets/img/vegetable.jpg"),
          index: 33,
          num: ""
        },
        {
          label: "砖圈圈",
          icon: require("./../../assets/img/brick-circle.png"),
          index: 34,
          num: ""
        },
        {
          label: "金牛座",
          icon: require("./../../assets/img/taurus.png"),
          index: 35,
          num: ""
        },
        {
          label: "白白赚",
          icon: require("./../../assets/img/white.jpg"),
          index: 36,
          num: ""
        },
        {
          label: "如意宝",
          icon: require("./../../assets/img/ruyi.png"),
          index: 37,
          num: ""
        },
        {
          label: "隔壁王叔叔",
          icon: require("./../../assets/img/uncle-wang.jpg"),
          index: 38,
          num: ""
        },
        {
          label: "小红帽",
          icon: require("./../../assets/img/red-hat.png"),
          index: 39,
          num: ""
        },
        {
          label: "蓝樱桃",
          icon: require("./../../assets/img/cherry.png"),
          index: 40,
          num: ""
        },
        {
          label: "赚星星",
          icon: require("./../../assets/img/stars.png"),
          index: 41,
          num: ""
        },
        {
          label: "飞鱼购",
          icon: require("./../../assets/img/fish.jpg"),
          index: 42,
          num: ""
        },
        {
          label: "米来宝",
          icon: require("./../../assets/img/milaboo.png"),
          index: 43,
          num: ""
        },
        {
          label: "掌萌人",
          icon: require("./../../assets/img/meng.png"),
          index: 44,
          num: ""
        },
        {
          label: "聚峰园",
          icon: require("./../../assets/img/meng.png"),
          index: 45,
          num: ""
        }
      ]
    };
  },
  created() {
    this.onGetList();
  },
  mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require("statusBar");
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret) {
        _this.$refs.header.$el.style.height = ret.statusHeight + 44 + "px";
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + "px";
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      window.api.closeWin();
    },
    // 获取排序数据
    onGetList() {
      const _this = this;
      this.iconItems.forEach(item => {
        let start = item.num ? item.num : 500;
        item.num = _this.onGenerateInteger(start, 10000);
      });
      this.iconItems.sort(this.compare("num")).reverse();
    },
    // 排序   arr.sort(this.compare('name'))
    compare(name) {
      return function(a, b) {
        let value1 = a[name];
        let value2 = b[name];
        return value1 - value2;
      };
    },
    // 生成指定范围随机整数
    onGenerateInteger(start, end) {
      return Math.floor(Math.random() * (end - start) + start);
    }
  }
};
</script>

<style lang="scss">
.ranking {
  width: 100%;
  @include flex(
    $direction: column,
    $justifyContent: flex-start,
    $flexWrap: nowrap
  );
  .ranking-wrapper {
    width: 100%;
    height: calc(100vh - 44px);
    overflow: hidden;
    .ranking-main {
      width: 100%;
      @include flex($direction: column, $justifyContent: center);
      li {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #ebedf0;
        @include flex();
        &:first-child {
          width: 100%;
          padding-left: 15px;
        }
        & > div {
          &:first-child {
            font-size: 16px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
          &:nth-child(2) {
            flex: 1;
            @include flex($justifyContent: flex-start);
            & > img {
              width: 40px;
              height: 40px;
              margin: 0 20px 0 35px;
              border-radius: 50%;
            }
            & > div {
              &:last-child {
                height: 40px;
                @include flex($direction: column, $align-items: flex-start);
                span {
                  &:first-child {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(51, 51, 51, 1);
                  }
                  &:last-child {
                    font-size: 12px;
                    font-weight: 500;
                    color: rgba(153, 153, 153, 1);
                  }
                }
              }
            }
          }
          &:last-child {
            font-size: 18px;
            font-weight: bold;
            color: rgba(40, 213, 141, 1);
          }
        }
      }
    }
  }
}
</style>
